<template>
  <div>
    <div class="mask" @click="$router.push('/home')"></div>
    <div class="reguser">
      <h2>HoShiZora</h2>
      <div class="form">
        <input type="text" class="username" placeholder="请输入手机号" v-model="phone">
        <input type="text" class="username" placeholder="请输入用户名" v-model="nickname">
        <input type="password" class="password" placeholder="请输入密码" v-model="password">
        <div class="code-box">
          <input type="text" class="username" placeholder="请输入短信验证码" v-model="code">
          <el-button type="primary" class="btn-code" @click="getCode" :disabled="disabled">{{ codeTitle }}</el-button>
        </div>
        <button class="btn-register" :class="{ active: isClick && isActive, unactive: !isClick && isActive }"
          @mousedown="isClick = true; isActive = true" @click="goToRegister" @mouseup="registerBtnUp">注 册</button>
      </div>
      <div class="checkbox"><input type="checkbox" v-model="isAgree">我已经认真阅读并同意HoShiZora的<a>《用户协议》</a></div>
      <router-link to="/home/login" class="gologin">已有账号登录？</router-link>
    </div>
  </div>
</template>

<script>
import axios from '@/request/request'
export default {
  data() {
    return {
      phone: '',
      nickname: '',
      password: '',
      code: '',
      codeTitle: '验证码',
      isAgree: true,
      disabled: false,
      isClick: false,
      isActive: true
    }
  },
  methods: {
    registerBtnUp() {
      this.isClick = false
      setTimeout(() => {
        this.isClick = true
        this.isActive = false
      }, 300)
    },
    // 注册按钮点击事件
    async goToRegister() {
      if (!this.phone.trim() || this.phone.length != 11) return this.$message.warning('请输入正确的手机号')
      if (this.nickname.trim() == '' || this.nickname.length < 6) return this.$message.warning('请输入合法昵称')
      if (this.password.trim() == '' || this.password.length < 6 || this.password.length > 16) return this.$message.warning('请输入合法的密码')
      if (this.code.trim() == '') return this.$message.warning('请输入验证码')
      if (!this.isAgree) return this.$message.warning('请勾选下方用户协议')
      const { data: res } = await axios.post(`/register/cellphone?phone=${this.phone}&password=${this.password}&captcha=${this.code}&nickname=${this.nickname}`)
      if (res.code == 200) {
        this.$message.success('注册成功，请登录')
        this.$router.push('/home/login')
      }
    },
    // 根据手机号，获取验证码
    async getCode() {
      if (this.phone.trim() == '' || this.phone.length != 11) return this.$message.warning('请输入正确的手机号')
      const { data: res } = await axios.get(`/captcha/sent?phone=${this.phone}`)
      if (res.code == 200) {
        this.codeTitle = '已发送'
        this.disabled = true
        setTimeout(() => {
          this.codeTitle = '验证码'
          this.disabled = false
        }, 10000)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.reguser {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
  width: 23vw;
  height: 30vw;
  border-radius: 6px;
  background-color: white;

  .gologin {
    font-size: 1vw;
  }

  .checkbox {
    display: flex;
    align-items: center;
    position: absolute;
    width: 18vw;
    height: 1.5vw;
    left: 3vw;
    bottom: 3.5vw;
    font-size: 0.8vw;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    input {
      display: inline-block;
      width: 0.8vw;
      height: 0.8vw;
    }

    a {
      margin: 0;
    }
  }

  a {
    display: inline-block;
    text-decoration: none;
    color: rgb(150, 46, 214);
    margin-top: 2.5vw;
  }

  .form {
    height: 20vw;
    margin-top: 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .code-box {
      position: relative;

      .btn-code {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        right: 10px;
        width: 4.5vw;
        height: 2.3vw;
        transform: translateY(-50%);
        background-color: #962ed6;
        border: none;
        font-size: 0.8vw;
      }
    }

    .username {
      width: 20vw;
      height: 2.5vw;
      outline: none;
      border: 0;
      border-bottom: 1px solid rgb(177, 173, 173);

      &::placeholder {
        text-indent: 1em;
        color: rgb(153, 153, 153);
        font-size: 14px;
      }
    }

    .password {
      width: 20vw;
      height: 2.5vw;
      outline: none;
      border: 0;
      border-bottom: 1px solid rgb(177, 173, 173);

      &::placeholder {
        text-indent: 1em;
        color: rgb(153, 153, 153);
        font-size: 14px;
      }
    }

    .btn-register {
      width: 20vw;
      height: 3vw;
      border: 0;
      border-radius: 1.5vw;
      background-color: rgb(120, 22, 180);
      color: #fff;
      font-size: 1.1vw;
      text-align: center;
      line-height: 3vw;
      transition: all 0.3s;

      &:hover {
        background-color: rgb(170, 65, 235);
      }

      &.active {
        background-color: rgb(120, 22, 180);
      }

      &.unactive {
        background-color: rgb(170, 65, 235);
      }
    }
  }

  h2 {
    position: absolute;
    top: 0;
    left: 1vw;
    color: rgb(127, 70, 224);
    transform: rotateY(10deg);
    font-size: 2vw;
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: 100vw;
  background-color: rgba(0, 0, 0, 0.7);
}
</style>